<template>
  <div>
    <!-- 登录按钮 -->
    <div v-if="showLogin">
      <loginWindow @changeShow="getModel(arguments)"></loginWindow>
    </div>
    <!-- 头部区域 -->
    <div class="head-container">
      <div class="header-con">
        <div class="header-search">
          <!-- logo -->
          <div class="header-box1">
            <label>CCX 餐餐香</label>
          </div>
          <!-- search -->
          <div class="header-box2" @click="showSearch">
            <indexSearch @focus="searchFocus" @change="searchChange" @confirm="searchConfirm"></indexSearch>
          </div>
        </div>
        <!-- title -->
        <div class="title">
            <div id="day" :class="activeClass == 'day'?'active':''" @click="getActive('day')">今日推荐</div>
            <div id="buy" :class="activeClass == 'buy'?'active':''" @click="getActive('buy')">限量抢购</div>
            <div id="price" :class="activeClass == 'price'?'active':''" @click="getActive('price')">特价商品</div>
        </div>
      </div>
      <!-- 轮播区域 -->
      <div v-if="activeClass == 'day'">
        <div class="swiper-container">
          <swiper 
          :indicator-dots="indicatorDots" :autoplay="autoplay"
          :interval="interval" :duration="duration"
          :indicator-active-color="indicatorActiveColor" :circular="circular">
            <swiper-item v-for="(item, index) in banners" :key="index">
              <image mode="scaleToFill" :src="item.banner_images" />
            </swiper-item>
          </swiper>
        </div>
      </div>

      <div v-if="activeClass == 'buy'">
        <div class="swiper-container">
          <swiper 
          :indicator-dots="indicatorDots" :autoplay="autoplay"
          :interval="interval" :duration="duration"
          :indicator-active-color="indicatorActiveColor" :circular="circular">
            <swiper-item v-for="(item, index) in banners" :key="index">
              <image mode="scaleToFill" :src="item.banner_images" />
            </swiper-item>
          </swiper>
        </div>
      </div>

      <div v-if="activeClass == 'price'">
        <div class="swiper-container">
          <swiper 
          :indicator-dots="indicatorDots" :autoplay="autoplay"
          :interval="interval" :duration="duration"
          :indicator-active-color="indicatorActiveColor" :circular="circular">
            <swiper-item v-for="(item, index) in banners" :key="index">
              <image mode="scaleToFill" :src="item.banner_images" />
            </swiper-item>
          </swiper>
        </div>
      </div>

    </div>
    <!-- 主页面 -->
    <div v-if="activeClass == 'day'">
      <indexBody></indexBody>
    </div>
    <div v-if="activeClass == 'buy'">
      <limitNum></limitNum>
    </div>
    <div v-if="activeClass == 'price'">
      <superPrice></superPrice>
    </div>
    
  </div>
</template>

<script>
import loginWindow from '../../components/loginWindow'
import indexSearch from '../../components/indexSearch'
import indexBody from '../../components/indexBody'
import limitNum from '../../components/limitNum'
import superPrice from '../../components/superPrice'

export default {
  components: { loginWindow, indexSearch, indexBody, limitNum, superPrice },
  data() {
    return {
      userinfo: {},
      showLogin: false,
      baseUrl: 'http://localhost/ccx_api/public/api/v1',
      banners: [],
      indicatorDots: true,
      autoplay: true,
      interval: 4000,
      duration: 1000,
      indicatorActiveColor: "#EECBAD",
      circular: true,
      activeClass: 'day',
      id: 1
    }
  },
  methods: {
    //接收登录组件传递的信息
    getModel(val) {
      // 接收传递的第一个信息（false）保存到showLogin里
      this.showLogin = val[0]
      //接收传递的第二个信息(userinfo)保存到userinfo里
      this.userinfo = val[1]
    },
    
    getActive(val) {
      this.activeClass = val
      if (val == 'day') {
        this.id = 1
      } else if (val == 'buy') {
        this.id = 2
      } else if (val == 'price') {
        this.id = 3
      }
      this.getBanner()
    },

    // 获取主题
    getBanner() {
      try {
        this.$httpWx.GET({
          url: 'getBanner/' + this.id,
        }).then(res => {
          this.banners = res.data
        })
      } catch (e) {
          showModel('请求失败', '请检查网络后再试!')
      }
  },

    //跳转搜索
    showSearch () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    }
  },
  mounted() {
    //将缓存中userinfo赋值给userinfo
    const userinfo = wx.getStorageSync('userinfo')
    if (userinfo.openId) {
      this.userinfo = userinfo
    }else {
      //隐藏导航栏
      wx.hideTabBar()
      this.showLogin = true
    }
  },
  // 分享页面
  onShareAppMessage () {
    return {
      title: `南北口味、集于一堂！
              温馨食尚、念念不忘！
              食堂点餐、我选餐餐香 ~`,
      path: '/pages/index/main'
    }
  },
  onLoad() {
    this.getBanner();
  }
}
</script>

<style scoped>
.head-container {
  width: 100%;
  height: 250px;
  background: #ea5149;
}

.header-con {
  position: fixed;
  z-index: 999;
}
.header-search {
  background: #ea5149;
  display: flex;
}
.header-box1 {
  display: inline-block;
  width: 40%;
  height: 40px;
  padding-top: 10px;
}
.header-box1 label {
  color: aliceblue;
  height: 30px;
  background: #FFA54F;
  font-size: 18px;
  border-radius: 10px;
  padding: 1px 5px;
  margin-left: 30px;
}

.header-box2 {
  display: inline-block;
  width: 50%;
  height: 40px;
  padding-top: 7px;
}

.title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #ea5149;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    padding: 0 30px 5px 30px;
}
.active {
  color: rgb(41, 37, 35);
  border-bottom: 2.5px solid #4F4F4F;
}
#day {
  width: 30%;
  margin: 0 40px 0 0;
  text-align: center;  
}
#buy {
  width: 30%;
  margin: 0 50px 0 10px;
  text-align: center;
}
#price {
  width: 30%;
  margin: 0 60px 0 0;
  text-align: center;
}

.swiper-container {
  padding: 100px 10px 0 10px;
}
.swiper-container swiper {
  width: 100%;
  height: 280rpx;
  border-radius: 10px;
  overflow: hidden;
}
.swiper-container swiper image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

</style>
